<template>
  <div>
    <div id="main">
      <div id="form">
        <el-form :model="wordUrl" label-width="100px" class="demo-ruleForm">
          <el-form-item
            label="考场文件"
            prop="phone"
          >
            <el-input v-model="wordUrl" type="text" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div id="buttons">
          <el-upload
            class="upload-demo"
            :action="updateUrl"
            :on-success="handleSuccess"
            :limit="1"
            :show-file-list="false"
            :file-list="fileList"
          >
            <el-button type="primary">上传/修改</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传xls文件</div> -->
          </el-upload>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getWordUrl } from '@/api/word'
export default {
  name: 'Word',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      loadUrl: process.env.VUE_APP_BASE_API + '/word/load',
      updateUrl: process.env.VUE_APP_BASE_API + '/word/update',
      url: '',
      wordUrl: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getWordUrl().then((resp) => {
        // if (resp.obj == null) {
        //   this.wordUrl = ''
        // } else {
        this.wordUrl = resp.obj.wordUrl
        // }
        // if (this.wordUrl !== '') {
        //   this.url = this.updateUrl
        //   console.log(this.url)
        // } else {
        //   this.url = this.loadUrl
        //   console.log(this.url)
        // }
      })
    },
    handleSuccess(res, file) {
      this.$notify({
        title: '导入成功',
        type: 'success'
      })
      this.fetchData()
    }
  }
}
</script>

<style scoped>
#main{
    width: 100%;
  }

  #form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 50px auto;

    width: 900px;

  }
  #buttons{
    text-align: center;
  }
</style>
